<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>活动详情</title>
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css" />
		<script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script>
		<script src="{$staticHost}/static/js/js.js"></script>
		
	</head>
	
	<body>
		<div id="list_details"></div>
		
		<script id="test" type="text/html">
		<article class="down-app">
			 <a href="http://mobile.hupu.com/download/joggers?r=share">
				<img src="{$staticHost}/static/images/share/logo.png"/>
			</a>

		</article>
		
		<ul  class="list-07">
			<li>
				<figure>
				<img src=<%=img%>>
				<!-- <figcaption>X人报名</figcaption> -->
				</figure>
				<div>
				<h6><%=title%></h6>
					<dl>
						<dd class="ico-money"><%=cost%></dd>
						<dd class="ico-time">
						<%=stime%> - <%=etime%>
						<% if (place.length==0){%>
						<span id="bq" class="btn  <%=classA%>" ><%=msg%></span>
						<%}%>
						</dd>
						<% if (place.length>0){%>
						<dd class="ico-location">
							<%=place%>
							<span id="bq" class="btn <%=classA%>" ><%=msg%></span>
						</dd>
						<%}%>
					</dl>
					<% if(type>2){%>
					<i class="ico-official"></i>
					<%}%>
					
				</div>
			</li>
		</ul>
		<section class="w640 ">
			<div class="img-list line-gray arrows">
				<span class="f15 color_gray mlr10 bold">参与者</span>
				<% for(var i=0; i< num ;i++){%>
					<% if (joins[i].header.length>0){%>
						<img src=<%=joins[i].header%> alt="">
					<%}%>
					<% if (joins[i].header.length==0){%>
						<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
					<%}%>
				<%}%>
				<i><%=joinNum%></i>
			</div>

			<div class="line-gray card-q">
				<span class="f15 color_gray mlr10 bold">所属群</span>
				<!-- 
				<% if (header.length>0){%>
					<img src=<%=header%> alt="">
				<%}%>
				<% if (header.length==0){%>
					<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
				<%}%> -->
				<span class="f15 color_dakgray"><%=gName%></span>
				<span class="f16 color_gray"><%=name%></span>

			</div>

			<% if(type!=0){%>
			<div class="line-gray card">
				<span class="f15 color_gray mlr10 bold">排名方式</span>
				<% if(type!=1&&type!=3){%>
				<span class="f15 color_dakgray">打卡天数<%=days%>天</span>
				<span class="f13 color_gray">每日完成3km即打卡+1天</span>
				<%}%>

				<% if(type==1||type==3){%>
				<p class="color_dakgray">目标里程累积<%=target%>km/人</p>
				<%}%>
			</div>
			<%}%>
			<article class="txt-01">
				<h5>活动详细介绍</h5>
				<p><%=introduce%></p>
				
			</article>
			<% if (activity.length > 0){%>
			<h3 class="line-gray-top f15 lh50 color_gray line-gray" >
				<a href="" class="arrows pl10">群组其他活动</a>
			</h3>
			<ul class="list-04">
				<% for(var i=0; i< activity.length ;i++) { %>
				<li><%=activity[i].title%></li>
				<%}%>
			</ul>
			<%}%>
			<div class="comment">
				<a>
					<img src="{$staticHost}/static/images/icon/icon@2x-min.png">
					我来评论
				</a>
			</div>
			<%if (comment.length >0){%>
			<h3 class="f15 color_gray p10">全部评论</h3>
			<ul class="list-08">
				<% for(var i=0; i< comment.length ;i++) { %>
				<li>
					<% if (comment[i].header.length>0){%>
						<img src=<%=comment[i].header%>>
					<%}%>
					<% if (comment[i].header.length==0){%>
						<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">　
					<%}%>
					<dl>
						<dt>
							<%=comment[i].name%>
							<span class="ico-time"><%=comment[i].add_time %></span>
						</dt>
						<!-- <dd><%=comment[i].content.replace(/<at *.+ ">/, "@")%> </dd> -->
					</dl>
				</li>
				<%}%>
				
			</ul>
			<a href=""></a>
			<%}%>
			
		</section>
		 <a class="dow-app color-blue" href="http://mobile.hupu.com/download/joggers?r=share">
		 下载虎扑跑步APP参加 精彩活动
		 </a>
	</script>

	<script>
		var gid = getQueryStringByName('gid');
		var aid = getQueryStringByName('aid');
        var shareToken = getQueryStringByName('shareToken');
		var num=0;
		$(function(){
			$.getJSON('{$staticHost}/groupWeb/detail', { aid:aid, gid:gid, shareToken:shareToken }, function(data, error) {
				
				var info=formatActivityData(data);
				var d = new Date(new Date(parseInt(info.stime) * 1000).getTime());
				info.stime =(d.getFullYear()+"."+(d.getMonth()+1)+"."+d.getDate());
				var q = new Date(new Date(parseInt(info.etime) * 1000).getTime());
				info.etime =(q.getFullYear()+"."+(q.getMonth()+1)+"."+q.getDate());

				if(info.comment.length > 0) {
					for(var x in info.comment) {
						if(info.comment[x].add_time !== 'undefined') {
							var dateAddTime =  new Date(new Date(parseInt(info.comment[x].add_time) * 1000).getTime());
							var q = new Date(parseInt(info.comment[x].add_time) * 1000);
							addTime =xs(q.getMonth()+1)+"."+xs(q.getDate());
							addTimeY = q.getFullYear()+"."+xs(q.getMonth()+1)+"."+xs(q.getDate())
							function xs(n){ return n<10?("0"+n):n;}
							 //开始时间
							var dateNow=new Date();    
							var timeSpanSinceAdd=dateNow.getTime()-dateAddTime; 
							var days=Math.floor(timeSpanSinceAdd/(24*3600*1000))
 							var leave1=timeSpanSinceAdd%(24*3600*1000)   
							var hours=Math.floor(leave1/(3600*1000))
							var leave2=leave1%(3600*1000)        
							var minutes=Math.floor(leave2/(60*1000))
							var leave3=leave2%(60*1000)      
							var seconds=Math.round(leave3/1000)
							if(days>365){
								info.comment[x].add_time =addTimeY
							}else if(days>6){
								info.comment[x].add_time =addTime
							}else if(days>2&&days<=6){
								info.comment[x].add_time =days+"天前"
							}else if(hours>0&&hours<=12){
								info.comment[x].add_time =hours+"小时前"
							}else if(minutes>0&&minutes<60){
								info.comment[x].add_time =minutes+"分钟前"
							}
							
							
							//info.comment[x].add_time =(p.getFullYear()+"."+(p.getMonth()+1)+"."+p.getDate());
						}


						var content = info.comment[x].content;
						if(content.indexOf('<at ') >= 0) {
							content = content.replace(new RegExp('\<at', 'g'), '@<a');
							content = content.replace(new RegExp('\<\/at\>', 'g'), '</a>');
							info.comment[x].content = content;
						}
					}
				}

				template.config('escape', false);
				num = data.joins.length > 5 ? 5 : data.joins.length;
				data.num = num;
				var html = template('test', data);
				document.getElementById('list_details').innerHTML = html;
			});
	
		});

		function formatActivityData(info) {
			if(info) {
				var timestamp = Date.parse(new Date()).toString();
				timestamp = timestamp.substr(0,10)

				if(info.stime > timestamp){
				info.msg='报名中';
				}else if(timestamp > info.stime && timestamp < info.etime){
					info.msg='进行中';
				}

				if(info.isJoin == 1){
					info.msg='已参加';
				}
				if(timestamp > info.etime){
					info.msg='已结束';
				}
				if(info.status ==1 ){
					info.msg='已取消';
				}
					
				info.cost = info.cost*1 > 0 ? info.cost : '免费';
				
				if(info.msg == '已参加') {
					info.classA = 'bg_rose';
				} else if(info.msg == '报名中'){
					info.classA = 'bg_blue';
				} else if(info.msg == '已结束'){
					info.classA = 'bg_gray';
				}else if(info.msg == '进行中'){
					info.classA = 'bg_orange';
				}else{
					info.classA = 'bg_gray';
				}
			}
			
			return info;
			}


		function getQueryString() {
	    var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+", "g"));
	    for (var i = 0; i < result.length; i++) {
	        result[i] = result[i].substring(1);
		    }
		    return result;
		}
		//根据QueryString参数名称获取值
		function getQueryStringByName(name) {
		    var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
		    if (result == null || result.length < 1) {
		        return "";
		    }
		    return result[1];
		}
		//根据QueryString参数索引获取值
		function getQueryStringByIndex(index) {
		    if (index == null) {
		        return "";
		    }
		    var queryStringList = getQueryString();
		    if (index >= queryStringList.length) {
		        return "";
		    }
		    var result = queryStringList[index];
		    var startIndex = result.indexOf("=") + 1;
		    result = result.substring(startIndex);
		    return result;
		}

		
	</script>
</body>
{template 'show/web-footer'}
